border-radius

(Esquinas redondeadas con CSS)

-moz-border-radius es una propiedad que nos permite redondear esquinas con CSS, sin embargo esta propiedad no es una propiedad standar y eso hace que no todos los navegadores la admitan.

Uno de esos navegadores es Explorer, se esperaba que con la nueva versión 8 este problema se solucionara pero al parecer no ha sido así.

Los usuarios de Firefox podemos seguir usando border-radius sin problemas. Safari y Google Chrome al estar basados en el motor Webkitlos de Safari lo verán si añadimos -webkit-border-radius

-moz-border-radius: 15px; (para Firefox)
-webkit-border-radius: 15px; (para Safari y Google Chrome)

Debemos tener en cuenta que con Explorer esas esquinas redondeadas se verán líneas rectas, no hay vuelta de hoja ni podemos conseguir que se vea igual con todos los navegadores a no ser que utilicemos imágenes o Javascript.

En una entrada pasada hablábamos sobre border-radius decíamos que para redondear esquinas con css era suficiente añadíamos algo así:

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;

Naturalmente deberíamos añadirlo en los estilos donde deseamos redondear las esquinas. Poniendo siempre como ejemplo una plantilla Minima en la sidebar sería así:

#sidebar-wrapper {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
más estilos...
}

En los post:
.post {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;
más estilos...
}

Si deseamos que la curva sea más o menos cerrada podemos variar 15px y probar con cualquier otro valor.

Es bastante sencillo de comprender, pero siempre quedan dudas, una de esas dudas ha llegado a mi correo y hace poco la formulaban en un comentario ¿puedo hacer que algunas esquinas sean redondas y dejar otras sin redondear? se puede hacer y vamos a hacerlo.

Con -moz-border-radius estamos redondeando las esquinas pero es obvio que para redondearlas necesitamos un borde, lo añadimos con border:3px solid #cc6666 de esa forma estamos diciendo que el borde tiene de grosor 3px el tipo de borde es solid y el color #cc6666.

TODAS LAS ESQUINAS CURVAS

-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border: 3px solid #cc6666;

INFERIOR IZQUIERDA

-moz-border-radius-bottomleft: 15px;
-webkit-border-radius-bottomleft: 15px;
border: 3px solid #cc6666;

INFERIOR DERECHA

-moz-border-radius-bottomright: 15px;
-webkit-border-radius-bottomright: 15px;
border: 3px solid #cc6666;

SUPERIOR IZQUIERDA
-moz-border-radius-topleft: 15px;
-webkit-border-radius-topleft: 15px;
border: 3px solid #cc6666;

SUPERIOR DERECHA
-moz-border-radius-topright: 15px;
-webkit-border-radius-topright: 15px;
border: 3px solid #cc6666;

El secreto no es otro que jugar y probar, si añadimos

-moz-border-radius-bottomleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-radius-bottomleft: 15px;
-webkit-border-radius-topright: 15px;
border: 3px solid #cc6666;

se vería esto:

También es posible hacerlo con una sola línea en ese caso nos olvidamos de lo anterior, y añadimos

-moz-border-radius: 5px 30px 5px 30px;

consideramos que de izquierda a derecha nos estamos refiriendo a:
izquierda-superior - derecha-superior - derecha-inferior - izquierda-inferior

¿Y si quiero redondear un div?

Podemos redondear las esquinas de un div usando CSS, añadimos el div en cualquier sitio, entradas, gadgets de HTML, plantilla...

<div class="esquinas-redondas">Este div tiene las esquinas redondas</div>

.esquinas-redondas{
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 1px solid #000;
background-color: #cc6666;
color:#fff;
padding: 30px;
}

Recuerda que si eres usuario de Explorer verás en los siguientes ejemplos líneas rectas.

Este div tiene las esquinas redondas

Se añadió padding: 30px; para dejar espacio entre el contenido y el div.

Pongamos que queremos seguir jugando.

.esquinas-redondas{
-moz-border-radius: 15px 15px 15px 15px;
-webkit-border-radius: 15px 15px 15px 15px;
border: 4px double #111;
color:#fff;
font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, Verdana, Sans-Serif;
font-size: 23px;
background:url('url de la imagen');
padding:30px;
}

Este div tiene las esquinas redondas

Y pongamos que seguimos otro día ...